<template>
  <div class="page">
    <div class="banner">
      <el-carousel
        indicator-position="none"
        @change="changeSwiper"
        height="400px"
        :interval="5000"
      >
        <el-carousel-item
          v-for="item in homeData && homeData.banner"
          :key="item.id"
        >
          <img class="banner_img" :src="item.img" />
        </el-carousel-item>
      </el-carousel>
      <div class="pot">
        <div
          :class="initialIndex == index ? 'pot-left a_pot-left' : ' pot-left'"
          v-for="(item, index) in homeData && homeData.banner"
          :key="index"
        ></div>
      </div>
    </div>

    <div class="row container">
      <div class="row_r">
        <div class="row_r_nav">
          <div class="row_title"><span>最新动态</span><span>/NEWS</span></div>
          <div class="row_tab">
            <div
              @click="tagsIdxEv(item, index)"
              :class="index == tagsIdx ? 'arow_tags row_tags' : ' row_tags'"
              v-for="(item, index) in (itemData && itemData['新闻动态']) || []"
              :key="index"
            >
              {{ item.lx }}
            </div>
          </div>
        </div>
        <div class="news">
          <div class="news_r">
            <div
              v-if="!newsNeo"
              style="text-align: center; color: #a9a4a4; margin-top: 102px"
            >
              暂无数据
            </div>
            <div v-if="newsNeo">
              <img class="new_img" :src="(newsNeo && newsNeo['fm']) || ''" />
              <div class="news_title line_1">
                {{ (newsNeo && newsNeo.bt) || "" }}
              </div>
              <div class="news_time">
                {{ (newsNeo && newsNeo["fbrq"]) || "" }}
              </div>
              <div class="news_ms line_2">
                {{ (newsNeo && newsNeo["fbt"]) || "" }}
              </div>
              <button
                class="news_btn"
                @click="goDetail(newsNeo['noticeId'] || '')"
              >
                查看详情
              </button>
            </div>
          </div>
          <div class="news_l">
            <div
              v-if="headNewsList.length == 0"
              style="text-align: center; color: #a9a4a4; margin-top: 115px"
            >
              暂无数据
            </div>
            <div
              class="news_l_list"
              v-for="(item, index) in headNewsList"
              :key="index"
              @click="goDetail(item)"
            >
              <i class="el-icon-caret-right"></i>
              <div class="news_l_list_t line_1" :title="item.bt">
                {{ item.bt }}
              </div>
              <div class="news_l_list_tiem" style="color: #797979">
                {{ item.fbrq }}
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="row_l">
        <div class="row_l_ggw">
          <!-- homeData && homeData['zwt'] -->
          <img class="ggw_tu" :src="homeData && homeData['zwt1']" />
        </div>
        <div class="features_box">
          <div
            class="features_tags"
            v-for="(item, index) in features"
            :key="item.t"
            @click="handleClick(item, index)"
          >
            <img
              class="feta_img"
              :src="require(`@/static/icon/${Number(index) + 1}.png`)"
            />
            <div>{{ item.t }}</div>
          </div>
        </div>
      </div>
    </div>
    <!-- 广告位占用位图 -->
    <div class="ggzw_1 container">
      <img :src="homeData && homeData['zwt2']" />
    </div>

    <div class="zbdt_bg">
      <div class="container zbdt_content">
        <div class="title"><span>招标动态</span><span>/Bidding News</span></div>
        <div class="zbdt_box">
          <div class="zbdt_tags_box">
            <div
              @click="getZbdtList(item, index)"
              :class="zbdtIdx == index ? 'av_zbdt_tags ' : 'zbdt_tags'"
              v-for="(item, index) in (itemData && itemData['招标动态']) || []"
              :key="index"
            >
              {{ item.lx }}
            </div>
          </div>
          <div style="text-align: end; color: #858181; margin-bottom: 10px">
            查看更多
          </div>
          <div class="zbdt_row">
            <div class="zbdt_list_r">
              <div
                v-if="zbdtList.slice(0, 5).length == 0"
                style="text-align: center; margin-top: 120px; color: #746f6f"
              >
                暂无数据
              </div>
              <div
                class="zbdt_list"
                v-for="(item, index) in zbdtList.slice(0, 5)"
                :key="index"
                @click="goDetail(item)"
              >
                <i class="el-icon-caret-right" style="color: #807f7f"></i>
                <div class="zbdt_list_title line_1" :title="item.bt">
                  {{ item.bt }}
                </div>
                <div class="zbdt_list_time">{{ item.fbrq }}</div>
              </div>
            </div>
            <div class="zbdt_list_l">
              <div
                v-if="zbdtList.slice(5, 11).length == 0"
                style="text-align: center; margin-top: 120px; color: #746f6f"
              >
                暂无数据
              </div>
              <div
                class="zbdt_list"
                v-for="(item, index) in zbdtList.slice(5, 11)"
                :key="index"
                @click="goDetail(item)"
              >
                <i class="el-icon-caret-right" style="color: #807f7f"></i>
                <div class="zbdt_list_title line_1" :title="item.bt">
                  {{ item.bt }}
                </div>
                <div class="zbdt_list_time">{{ item.fbrq }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="icon_box">
      <div class="container icon_ggw_plan">
        <img :src="homeData && homeData['zwt3']" />
        <img :src="homeData && homeData['zwt4']" />
      </div>
      <div class="hzdw_box container">
        <div class="title">
          <span>合作单位</span><span>/Cooperative unit</span>
        </div>
        <el-carousel indicator-position="none" :interval="5000" height="241px">
          <el-carousel-item
            v-for="(arrs, index) in (homeData && homeData['hzdw']) || []"
            :key="index"
          >
            <div class="logo">
              <div class="logo_tags" v-for="(ite, idx) in arrs" :key="idx">
                <img class="log_img" :src="ite.img" />
              </div>
            </div>
          </el-carousel-item>
        </el-carousel>

        <div class="title" style="margin-top: 31px">
          <span>优选供应商</span><span>/Preferred suppliers</span>
        </div>
        <el-carousel indicator-position="none" :interval="5000" height="147px">
          <el-carousel-item v-for="(arrs, index) in homeData&&homeData['gys'] || []" :key="index">
            <div class="logo">
              <div class="logo_tags" v-for="(ite, idx) in arrs" :key="idx">
                <img class="log_img" :src="ite.img"/>
              </div>
            </div>
          </el-carousel-item>
        </el-carousel>
      </div>
    </div>

    <div class="yq_bg">
      <div class="container yq_box">
        <div class="title">
          <span>友情链接</span><span>/Preferred suppliers</span>
        </div>
        <div class="link_box">
          <div class="link_tag">
            <div class="ls" v-for="item in homeData&&homeData['yqlj'] || []" :key="item.id">
              <img :src="item.img"/>
            </div>
          </div>
          <div class="lj_box">
            <div class="lj_tags" v-for="(item, index) in footerLiink">
              <span>中华人民共和国国家发展</span>
              <span v-if="footerLiink.length - 1 != index">|</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { getTonke } from "@/utils/user.js";
export default {
  name: "IndexPage",
  data() {
    return {
      itemData: null,
      banners: [...new Array(4)],
      initialIndex: 0,
      tagsIdx: 0,
      newsNeo: null,
      headNewsList: [],
      features: [
        { t: "用户注册登录", icon: "", status: 1 },
        { t: "中介超市", icon: "" },
        { t: "代理机构选取", icon: "" },
        { t: "询价调查报告", icon: "" },
        { t: "评审专家抽取", icon: "" },
        { t: "不见面开标", icon: "" },
      ],
      zbdtIdx: 0,
      zbdtList: [],
      footerLiink: [...new Array(5)],
      userInfo: null,
      isLogin: false,
      homeData: null,
    };
  },
  created() {
    this.$api.homeImgAPI({}).then((item) => {
      let homeData = item.data;
      let { zwt } = homeData;
      for (let i in zwt) {
        homeData[`zwt${[zwt[i].sort]}`] = zwt[i].img;
      }
      homeData["hzdw"] = this.arrrySplit(
        (homeData && homeData["hzdw"]) || [],
        12
      );
      homeData["gys"] = this.arrrySplit((homeData && homeData["gys"]) || [], 6);
      this.homeData = homeData;
    });
    this.$api.getHomeAPI({}).then((item) => {
      let itemData = item.data;
      this.itemData = itemData;
      this.tagsIdxEv(itemData["新闻动态"][0]);
      this.getZbdtList(itemData["招标动态"][0]);
    });
  },
  mounted() {
    getTonke((info) => {
      this.userInfo = info["getuserInfo"];
      this.isLogin = !!info["getToken"];
    });
  },
  methods: {
    arrrySplit(arr, n) {
      let arr1 = [];
      for (let i = 0; i < arr.length; i += n) {
        let arr2 = arr.slice(i, i + n);
        arr1.push(arr2);
      }
      return arr1;
    },
    goDetail(row) {
      this.$router.push({
        path: "/detail",
        query: {
          noticeId: row.noticeId,
        },
      });
    },
    handleClick(row, idx) {
      if (row.t == "用户注册登录") {
        this.$nuxt.$emit("login");
      }
    },
    tagsIdxEv(row, idx = 0) {
      this.$api
        .webHomeNewsAPI({ pageNum: 1, pageSize: 8, lxCode: row.lxCode })
        .then((item) => {
          let { list } = item.data;
          this.tagsIdx = idx;
          this.newsNeo = list[0];
          this.headNewsList = list.slice(1, list.length);
        });
    },
    getZbdtList(row, idx = 0) {
      this.$api
        .webHomeBiddingAPI({ lxCode: row.lxCode, pageNum: 1, pageSize: 12 })
        .then((item) => {
          this.zbdtIdx = idx;
          let { list } = item.data;
          this.zbdtList = list;
        });
    },
    changeSwiper(idx) {
      this.initialIndex = idx;
    },
  },
};
</script>
<style  scoped>
.link_tag {
  margin: 31px 0;
  display: grid;
  grid-template-columns: 15% 15% 15% 15% 15% 15%;
  justify-content: space-between;
}

.lj_box {
  display: flex;
  justify-content: space-between;
}

.lj_box .lj_tags {
  width: 33%;
  display: flex;
  justify-content: space-around;
  margin-top: 31px;
}

.link_tag .ls {
  background-color: #2958b0;
  height: 106px;
}

.yq_bg {
  height: 376px;
  background-image: url("@/static/img/yqjj.png");
  background-repeat: no-repeat;
  background-size: cover;
}

.yq_bg .yq_box {
  padding: 41px 0;
}

.icon_box {
  background-color: white;
  padding: 41px 0px;
}

.hzdw_box {
  margin-top: 40px;
}

.hzdw_box .logo {
  margin-top: 21px;
  display: grid;
  grid-template-columns: 16% 16% 16% 16% 16% 16%;
  justify-content: space-between;
}

.hzdw_box .logo .logo_tags {
  background: #ccc;
  margin: 8px;
  height: 90px;
}

.hzdw_box .logo .logo_tags .log_img {
  background-color: #807f7f;
  height: 100%;
}

.icon_ggw_plan {
  display: flex;
  justify-content: space-between;
}

.icon_ggw_plan img {
  background-color: #ccc;
  height: 120px;
  width: 48%;
}

.title span:nth-child(1) {
  font-weight: bold;
  font-size: 24px;
}

.title span:nth-child(2) {
  color: #ccc;
  font-size: 16px;
  margin-left: 5px;
}

.page {
  background-color: #f8f8f8;
}

.zbdt_bg {
  margin-top: 41px;
  background-color: #ebebeb;
  padding-top: 40px;
  padding-bottom: 40px;
  background-image: url("@/static/img/pexels-photo-2387797@2x.png");
  background-repeat: no-repeat;
  background-size: cover;
}

.zbdt_bg .zbdt_box {
  background-color: white;
  margin-top: 31px;
  padding: 21px;
}

.zbdt_tags_box {
  display: flex;
  margin-bottom: 16px;
}

.zbdt_row {
  display: flex;
  justify-content: space-between;
  display: grid;
  grid-template-columns: 50% 50%;
  border-top: 1px solid #d8d8d8;
}

.zbdt_list {
  display: flex;
  height: 60px;
  align-items: center;
  margin: 0 15px;
  border-bottom: 1px dashed #e2e2e2;
  padding: 0 15px;
}
.zbdt_list:hover {
  background: #f4f9fd;
}
.zbdt_list:hover .zbdt_list_title {
  color: #2959b0;
}

.zbdt_list .zbdt_list_title {
  flex: 1;
  margin-right: 41px;
  margin-left: 5px;
}

.zbdt_list_time {
  color: #807f7f;
  color: 13px;
}

.zbdt_list_r {
  border-right: 1px solid #d8d8d8;
  height: 366px;
}

.zbdt_list_l {
  height: 366px;
}

.zbdt_tags {
  margin-right: 41px;
  padding: 15px 21px;
  background-color: #ebebeb;
  font-size: 16px;
  cursor: pointer;
}

.av_zbdt_tags {
  background-color: #2958b0;
  color: white;
  font-size: 16px;
  margin-right: 41px;
  padding: 15px 21px;
  cursor: pointer;
}

.ggzw_1 {
  margin-top: 31px;
}

.ggzw_1 img {
  background-color: #ccc;
  height: 120px;
  width: 100%;
}

.row {
  display: flex;
  justify-content: space-between;
  margin-top: 41px;
}

.row .row_r {
  width: 70%;
  background-color: white;
  padding: 15px;
  padding-top: 31px;
}

.row .row_r .news {
  display: flex;
  justify-content: space-between;
  height: 380px;
}

.row .row_r .news_r {
  width: 48%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.row .row_r .news .new_img {
  background-color: #ccc;
  height: 200px;
  width: 100%;
  margin-bottom: 15px;
}

.row .row_r .news_r .news_title {
  font-weight: bold;
  font-size: 19px;
  line-height: 25px;
}

.row .row_r .news_r .news_time {
  color: #797979;
  font-size: 16px;
  margin-bottom: 15px;
  margin-top: 15px;
}

.row .row_r .news_r .news_ms {
  color: #616060;
  line-height: 19px;
  font-size: 16px;
  margin-bottom: 21px;
}

.news_btn {
  background-color: #2958b0;
  color: white;
  height: 40px;
  width: 90px;
  border-radius: 20px;
}

.row .row_r .news_l {
  margin-top: -18px;
  width: 50%;
}

.row .row_r .news_l .news_l_list {
  display: flex;
  align-items: center;
  height: 56px;
  border-bottom: 1px dashed #e2e2e2;
  cursor: pointer;
  padding: 0 10px;
}
.row .row_r .news_l .news_l_list:hover {
  background-color: #f4f9fd;
}
.row .row_r .news_l .news_l_list:hover .news_l_list_t {
  color: #2959b0;
}

.row .row_r .news_l .news_l_list .news_l_list_t {
  flex: 1;
}

.row .row_r .news_l .news_l_list .news_l_list_tiem {
  color: #797979;
  margin-left: 31px;
}

.row .row_r .row_r_nav {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #bbbbbb;
  margin-bottom: 21px;
}

.row .row_r .row_r_nav .row_title span:nth-child(1) {
  font-weight: bold;
  font-size: 24px;
}

.row .row_r .row_r_nav .row_title span:nth-child(2) {
  color: #ccc;
  font-size: 16px;
  margin-left: 5px;
}

.row .row_r .row_r_nav .row_tab {
  display: flex;
}

.row .row_r .row_r_nav .row_tab .row_tags {
  margin-left: 28px;
  cursor: pointer;
}

.row .row_r .row_r_nav .row_tab .arow_tags {
  border-bottom: 2px solid #2958b0;
  padding-bottom: 21px;
  color: #2958b0;
}

.row .row_l {
  width: 26%;
}

.row .row_l .features_box {
  margin-top: 15px;
  display: grid;
  background: white;
  grid-template-columns: 50% 50%;
  box-shadow: 0 0 10px 10px rgb(250, 248, 248);
}

.row .row_l .features_box .features_tags {
  border-right: 1px solid #eeeeee;
  border-bottom: 1px solid #eeeeee;
  height: 109px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.row .row_l .features_box .features_tags div {
  font-size: 12px;
  margin-top: 10px;
}

.row .row_l .features_box .features_tags:nth-child(2n) {
  border-right: none;
}

.row .row_l .features_box .features_tags:nth-last-child(2) {
  border-bottom: none;
}

.row .row_l .features_box .features_tags:nth-last-child(1) {
  border-bottom: none;
}

.row .row_l .features_box .features_tags .feta_img {
  width: 60px;
  height: 60px;
  border-radius: 50%;
}

.row .row_l_ggw .ggw_tu {
  background-color: #ccc;
  width: 100%;
  height: 140px;
}

.banner {
  height: 400px;
  background-color: #ccc;
  position: relative;
}
.banner .banner_img {
  width: 100%;
  height: 400px;
}

.banner .pot {
  position: absolute;
  z-index: 10;
  right: 10%;
  bottom: 10%;
  display: flex;
}

.banner .pot .pot-left {
  width: 8px;
  height: 8px;
  background-color: rgb(233 233 233 / 53%);
  border-radius: 50%;
  margin-left: 15px;
}

.banner .pot .a_pot-left {
  background-color: white;
  width: 20px;
  border-radius: 15px;
}
</style>